<template>
  <div>
    <CodeCard v-bind="btnDesc">
      <div class="box">
        <div class="top">
          <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
            <el-button>上左</el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
            <el-button>上边</el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="Top Right 提示文字" placement="top-end">
            <el-button>上右</el-button>
          </el-tooltip>
        </div>
        <div class="left">
          <el-tooltip class="item" effect="dark" content="Left Top 提示文字" placement="left-start">
            <el-button>左上</el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="Left Center 提示文字" placement="left">
            <el-button>左边</el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="Left Bottom 提示文字" placement="left-end">
            <el-button>左下</el-button>
          </el-tooltip>
        </div>

        <div class="right">
          <el-tooltip class="item" effect="dark" content="Right Top 提示文字" placement="right-start">
            <el-button>右上</el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="Right Center 提示文字" placement="right">
            <el-button>右边</el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="Right Bottom 提示文字" placement="right-end">
            <el-button>右下</el-button>
          </el-tooltip>
        </div>
        <div class="bottom">
          <el-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-start">
            <el-button>下左</el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
            <el-button>下边</el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="Bottom Right 提示文字" placement="bottom-end">
            <el-button>下右</el-button>
          </el-tooltip>
        </div>
      </div>

      <template #annotation></template>
    </CodeCard>
  </div>
</template>

<script>


export default {
  components: {
    
  },
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
    }
  },
  setup() {
    const btnDesc = {
      title: "Tooltip 文字提示",
      describe: "常用于展示鼠标 hover 时的提示信息。",
      codeBlock: `<div class="box">
        <div class="top">
          <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
            <el-button>上左</el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
            <el-button>上边</el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="Top Right 提示文字" placement="top-end">
            <el-button>上右</el-button>
          </el-tooltip>
        </div>
        <div class="left">
          <el-tooltip class="item" effect="dark" content="Left Top 提示文字" placement="left-start">
            <el-button>左上</el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="Left Center 提示文字" placement="left">
            <el-button>左边</el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="Left Bottom 提示文字" placement="left-end">
            <el-button>左下</el-button>
          </el-tooltip>
        </div>

        <div class="right">
          <el-tooltip class="item" effect="dark" content="Right Top 提示文字" placement="right-start">
            <el-button>右上</el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="Right Center 提示文字" placement="right">
            <el-button>右边</el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="Right Bottom 提示文字" placement="right-end">
            <el-button>右下</el-button>
          </el-tooltip>
        </div>
        <div class="bottom">
          <el-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-start">
            <el-button>下左</el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
            <el-button>下边</el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="Bottom Right 提示文字" placement="bottom-end">
            <el-button>下右</el-button>
          </el-tooltip>
        </div>
      </div>`,
      attrs: [
        {
          "name": "effect",
          "describe": "默认提供的主题",
          "type": "String",
          "emun": "dark/light",
          "default": "dark"
        }, {
          "name": "content",
          "describe": "显示的内容，也可以通过 slot#content 传入 DOM",
          "type": "String",
          "emun": "—",
          "default": "—"
        }, {
          "name": "placement",
          "describe": "Tooltip 的出现位置",
          "type": "String",
          "emun": "top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end",
          "default": "bottom"
        }, {
          "name": "value / v-model",
          "describe": "状态是否可见",
          "type": "Boolean",
          "emun": "—",
          "default": "FALSE"
        }, {
          "name": "disabled",
          "describe": "Tooltip 是否可用",
          "type": "Boolean",
          "emun": "—",
          "default": "FALSE"
        }, {
          "name": "offset",
          "describe": "出现位置的偏移量",
          "type": "Number",
          "emun": "—",
          "default": "0"
        }, {
          "name": "transition",
          "describe": "定义渐变动画",
          "type": "String",
          "emun": "—",
          "default": "el-fade-in-linear"
        }, {
          "name": "visible-arrow",
          "describe": "是否显示 Tooltip 箭头，更多参数可见Vue-popper",
          "type": "Boolean",
          "emun": "—",
          "default": "TRUE"
        }, {
          "name": "popper-options",
          "describe": "popper.js 的参数",
          "type": "Object",
          "emun": "参考 popper.js 文档",
          "default": "{ boundariesElement: 'body', gpuAcceleration: false }"
        }, {
          "name": "open-delay",
          "describe": "延迟出现，单位毫秒",
          "type": "Number",
          "emun": "—",
          "default": "0"
        }, {
          "name": "manual",
          "describe": "手动控制模式，设置为 true 后，mouseenter 和 mouseleave 事件将不会生效",
          "type": "Boolean",
          "emun": "—",
          "default": "FALSE"
        }, {
          "name": "popper-class",
          "describe": "为 Tooltip 的 popper 添加类名",
          "type": "String",
          "emun": "—",
          "default": "—"
        }, {
          "name": "enterable",
          "describe": "鼠标是否可进入到 tooltip 中",
          "type": "Boolean",
          "emun": "—",
          "default": "TRUE"
        }, {
          "name": "hide-after",
          "describe": "Tooltip 出现后自动隐藏延时，单位毫秒，为 0 则不会自动隐藏",
          "type": "number",
          "emun": "—",
          "default": "0"
        }, {"name": "tabindex", "describe": "Tooltip 组件的 tabindex", "type": "number", "emun": "—", "default": "0"}]
    };
    return {
      btnDesc,
    };
  },
};
</script>

<style lang="stylus" scoped>
.box {
  width: 400px;

  .top {
    text-align: center;
  }

  .left {
    float: left;
    width: 60px;
  }

  .right {
    float: right;
    width: 60px;
  }

  .bottom {
    clear: both;
    text-align: center;
  }

  .item {
    margin: 4px;
  }

  /deep/ .left .el-tooltip__popper,
  /deep/ .right .el-tooltip__popper {
    padding: 8px 10px;
  }

}
</style>
